<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>插槽的基本使用-作用域插槽</title>
</head>
<body>

<!--
■作用域插槽是slot一个比较难理解的点,而且官方文档说的又有点不清晰。
■这里,我们用一句话对其做一个总结,然后我们在后续的案例中来体会 :
  口父组件替换插槽的标签,但是内容由子组件来提供。
■我们先提一个需求
  口子组件中包括一组数据,比如: pLanguages: pLanguages: ['JavaScript', 'Python', 'Swift', 'Go', 'C++']
  口需要在多个界面进行展示:
     √ 某些界面是以水平方向-展示的,
     √ 某些界面是以列表形式展示的,
     √ 某些界面直接展示一个数组
  口内容在子组件,希望父组件告诉我们如何展示,怎么办呢?
     √ 用slot作用域插槽就可以了（父组件获取到子组件的数据，根据需求用数据更改子组件插槽内容的展示方式）
-->

<div id="app">
  <!--  【■最原始的使用方式】-->
  <my-div></my-div>

  <!------------------------------------------------------------------------------------------------------------->

  <!--  【■作用域插槽的使用方式】-->
  <!--  【根据子组件对象内部的变量来使用，也就是在父标签中如何使用子组件内部的变量或者数据，来替换插槽内容】-->
  <my-div>
    <!--template标签在这里的目的是获取子组件中的pLanguages的属性值
        vue2.5.x以下，必须用template标签，以上就可以随便使用其他的标签 -->
    <!--slot-scope属性会绑定到组件内部的slot标签，“slot”这个值是随便命名的，主要是和<slot></slot>标签相关联-->
    <template slot-scope="slot">
      <!--调用绑定到的<slot></slot>标签的data属性，也就获取到了组件对象pLanguages这个属性值，pLanguages是个数组，
      slot.data对应的就是pLanguages数组，join()方法的作用就是将数组以指定的分割符拼接返回拼接后的字符串-->
      <span>{{slot.data.join("/")}}</span>
    </template>
  </my-div>

</div>

<!--■作用域插槽的使用方式（模板）-->
<template id="myDiv">
  <div>
    <!-- 给<slot></slot>标签绑定一个属性data，data是随便取的名字，取其他名字也可以，
    这个data属性绑定到了组件对象的pLanguages的值，这个data属性用于使用组件时的获取-->
    <slot :data="pLanguages">
      <ul>
        <li v-for="item in pLanguages">{{item}}</li>
      </ul>
    </slot>
  </div>
</template>


<script src="../js/vue.js"></script>
<script>

  //构造组件对象
  const myDiv = {
    template: "#myDiv",
    data() {
      return {
        pLanguages: ['JavaScript', 'Python', 'Swift', 'Go', 'C++']
      }
    }
  }

  const app = new Vue({
    el: "#app",
    //注册局部组件
    components: {
      myDiv
    }
  });
</script>
</body>
</html>